<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
    <style>
        .dropdown-submenu {
            position: relative;

        }
        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
        }
        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }
        .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }
        .dropdown-submenu:hover > a:after {
            border-left-color: #fff;
        }
        .dropdown-submenu.pull-left {
            float: none;
        }
        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }
        #top-nav-menu li{
            background-color:#FFC0CB
        }
        #top-nav-menu a:hover,.dropdown-menu li>a:hover{
            background-color:#FF69B4!important;
            background-image:linear-gradient(0deg, #FFC0CB, #FF69B4 50%, #FFC0CB);
        }
        #top-nav-menu a:focus,.dropdown-menu:focus,.dropdown-menu:focus{
            background-color:#FF69B4
        }
        .dropdown .dropdown-menu{
            background-color: #FFC0CB;
        }

        #top-nav-menu li a{
           color: white;
        }
        #navbar-default{
            background-color:#FFC0CB
        }
        #top-nav-menu >li{
            min-width: 100px;
            text-align: center;
        }

    </style>
</head>

<body>
<script>
    //动态加载的html账单管理跳转
    // $(".dropdown").on('click','.dropdown-toggle',function () {
    //     $(".secound-menu").show();
    //
    //     console.log(id);
    // });
    +function ($) {
        'use strict';

        // DROPDOWN CLASS DEFINITION
        // =========================

        var backdrop = '.dropdown-backdrop'
        var toggle   = '[data-toggle="dropdown"]'
        var Dropdown = function (element) {
            $(element).on('click.bs.dropdown', this.toggle)
        }

        Dropdown.VERSION = '3.4.1'

        function getParent($this) {
            var selector = $this.attr('data-target')

            if (!selector) {
                selector = $this.attr('href')
                selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
            }

            var $parent = selector !== '#' ? $(document).find(selector) : null

            return $parent && $parent.length ? $parent : $this.parent()
        }

        function clearMenus(e) {
            if (e && e.which === 3) return
            $(backdrop).remove()
            $(toggle).each(function () {
                var $this         = $(this)
                var $parent       = getParent($this)
                var relatedTarget = { relatedTarget: this }

                if (!$parent.hasClass('open')) return

                if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return

                $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))

                if (e.isDefaultPrevented()) return

                $this.attr('aria-expanded', 'false')
                $parent.removeClass('open').trigger($.Event('hidden.bs.dropdown', relatedTarget))
            })
        }

        Dropdown.prototype.toggle = function (e) {
            var $this = $(this)

            if ($this.is('.disabled, :disabled')) return

            var $parent  = getParent($this)
            var isActive = $parent.hasClass('open')

            clearMenus()

            if (!isActive) {
                if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
                    // if mobile we use a backdrop because click events don't delegate
                    $(document.createElement('div'))
                        .addClass('dropdown-backdrop')
                        .insertAfter($(this))
                        .on('click', clearMenus)
                }

                var relatedTarget = { relatedTarget: this }
                $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

                if (e.isDefaultPrevented()) return

                $this
                    .trigger('focus')
                    .attr('aria-expanded', 'true')

                $parent
                    .toggleClass('open')
                    .trigger($.Event('shown.bs.dropdown', relatedTarget))
            }

            return false
        }

        Dropdown.prototype.keydown = function (e) {
            if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return

            var $this = $(this)

            e.preventDefault()
            e.stopPropagation()

            if ($this.is('.disabled, :disabled')) return

            var $parent  = getParent($this)
            var isActive = $parent.hasClass('open')

            if (!isActive && e.which != 27 || isActive && e.which == 27) {
                if (e.which == 27) $parent.find(toggle).trigger('focus')
                return $this.trigger('click')
            }

            var desc = ' li:not(.disabled):visible a'
            var $items = $parent.find('.dropdown-menu' + desc)

            if (!$items.length) return

            var index = $items.index(e.target)

            if (e.which == 38 && index > 0)                 index--         // up
            if (e.which == 40 && index < $items.length - 1) index++         // down
            if (!~index)                                    index = 0

            $items.eq(index).trigger('focus')
        }


        // DROPDOWN PLUGIN DEFINITION
        // ==========================

        function Plugin(option) {
            return this.each(function () {
                var $this = $(this)
                var data  = $this.data('bs.dropdown')

                if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
                if (typeof option == 'string') data[option].call($this)
            })
        }

        var old = $.fn.dropdown

        $.fn.dropdown             = Plugin
        $.fn.dropdown.Constructor = Dropdown


        // DROPDOWN NO CONFLICT
        // ====================

        $.fn.dropdown.noConflict = function () {
            $.fn.dropdown = old
            return this
        }


        // APPLY TO STANDARD DROPDOWN ELEMENTS
        // ===================================

        $(document)
            // .on('click.bs.dropdown.data-api', clearMenus)
            // .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
             .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
            // .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
            // .on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)

    }(jQuery);

</script>
<nav class="navbar  navbar-fixed-top" id="navbar-default" role="navigation">
    <nav role="navigation" class="miscro-font">
        <ul class="nav navbar-nav navbar-left" id="top-nav-menu">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: white">商品分类导航<b class="caret"></b></a>
                <ul class="dropdown-menu secound-menu">
                    <li class="dropdown-submenu"> <a class="first-class-a" href="#" ctg-data="1"><b>鲜花</b></a><ul class="dropdown-menu secound-menu"><li class="dropdown-submenu"><a href="#">送朋友</a><ul class="dropdown-menu fourth-menu">
                        <li><a href="http://localhost:88/api/search/list/list.html?catalog3Id15">向日葵</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id16">郁金香</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id17">康乃馨</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id19">黄玫瑰</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id20">勿忘我</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id25">剑兰</a></li></ul></li><li class="dropdown-submenu"><a href="#">送爱人</a><ul class="dropdown-menu fourth-menu">
                        <li><a href="http://localhost:88/api/search/list/list.html?catalog3Id21">合欢花</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id22">薰衣草</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id23">紫藤</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id24">玫瑰</a></li></ul></li><li class="dropdown-submenu"><a href="#">送长辈</a><ul class="dropdown-menu fourth-menu">
                        <li><a href="http://localhost:88/api/search/list/list.html?catalog3Id26">凤仙花</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id27">凌霄花</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id28">百合花</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id29">长寿花</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id30">牡丹花</a></li></ul></li></ul>

                    </li>
                    <li class="dropdown-submenu"> <a class="first-class-a" href="#" ctg-data="2"><b>永生花</b></a><ul class="dropdown-menu secound-menu"><li class="dropdown-submenu"><a href="#">瓶装花</a><ul class="dropdown-menu fourth-menu">
                        <li><a href="http://localhost:88/api/search/list/list.html?catalog3Id31">红玫瑰</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id32">蓝色妖姬</a></li></ul></li><li class="dropdown-submenu"><a href="#">特色永生花</a><ul class="dropdown-menu fourth-menu">
                        <li><a href="http://localhost:88/api/search/list/list.html?catalog3Id33">七彩系列</a></li><li><a href="http://localhost:88/api/search/list/list.html?catalog3Id34">永恒系列</a></li></ul></li></ul>

                    </li>
                    <li class="dropdown-submenu"> <a class="first-class-a" href="#" ctg-data="3"><b>花盒</b></a><ul class="dropdown-menu secound-menu"><li class="dropdown-submenu"><a href="#">圆形花盒</a><ul class="dropdown-menu fourth-menu">
                    </ul></li><li class="dropdown-submenu"><a href="#">方形花盒</a><ul class="dropdown-menu fourth-menu">
                    </ul></li></ul>

                    </li>
                    <li class="dropdown-submenu"> <a class="first-class-a" href="#" ctg-data="4"><b>零售</b></a><ul class="dropdown-menu secound-menu"><li class="dropdown-submenu"><a href="#">一朵装</a><ul class="dropdown-menu fourth-menu">
                    </ul></li><li class="dropdown-submenu"><a href="#">三朵装</a><ul class="dropdown-menu fourth-menu">
                    </ul></li></ul>

                    </li>
                </ul>
            </li>
            <li><span id="index_menu_selected1"></span><a href="#" class="click_selected">首页</a> </li>
            <li><span id="index_menu_selected2"></span><a href="#" class="click_selected">鲜花</a> </li>
            <li><span id="index_menu_selected3"></span><a href="#" class="click_selected">永生花</a> </li>
        </ul>
    </nav>
</nav>
<!--<nav class="navbar  navbar-fixed-top" id="navbar-default" role="navigation">-->
<!--    <nav role="navigation" class="miscro-font">-->
<!--        <ul class="nav navbar-nav navbar-left" id="top-nav-menu">-->
<!--            <li class="dropdown" >-->
<!--                <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: white">商品分类导航<b class="caret"></b></a>-->
<!--                <ul class="dropdown-menu secound-menu" >-->
<!--                    <li class="dropdown-submenu" th:each="category : ${categorys}"> <a href="#" th:attr="ctg-data=${category.catId}"><b th:text="${category.name}"></b></a>-->
<!--                        <ul class="dropdown-menu third-menu">-->
<!--                            <li class="dropdown-submenu"><a href="#">第er级导航</a>-->
<!--                                <ul class="dropdown-menu fourth-menu">-->
<!--                                    <li><a href="#">第san级导航</a></li>-->
<!--                                    <li><a href="#">第san级导航</a></li>-->
<!--                                </ul>-->
<!--                            </li>-->
<!--                            <li class="dropdown-submenu"><a href="#">第三级导航</a>-->
<!--                                <ul class="dropdown-menu fourth-menu">-->
<!--                                </ul>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li class="dropdown-submenu"> <a href="#">2</a>-->
<!--                        <ul class="dropdown-menu third-menu">-->
<!--                            <li><a href="#">第三级导航</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </li>-->
<!--            <li ><span id="index_menu_selected1"></span><a href="#" class="click_selected">首页</a> </li>-->
<!--            <li ><span id="index_menu_selected2"></span><a href="#" class="click_selected">鲜花</a> </li>-->
<!--            <li ><span id="index_menu_selected3"></span><a href="#" class="click_selected">永生花</a> </li>-->
<!--        </ul>-->
<!--    </nav>-->
<!--</nav>-->
</body>
</html>